<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '奇岛健身'
			});
			document.write(content);
		</script>
  			
	</head>
	<body class="wrap_bg black_bg">
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<!--banner图-->
		<header>
			<div class="banner_img">
				
				 <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' >
				  <ul class="am-slides slider">
				    
				  </ul>
				</div>
			</div>
		</header>
		
		<section>
			<div class="filter_tab am-g" data-am-sticky>
				<div class="am-u-sm-6 am-text-center border-right-grey filter_tab_area">
					<span class="color-white">杭州上城</span>
					<i class="am-icon-angle-down color-white"></i>
				</div>
				<div class="am-u-sm-6 am-text-center filter_tab_shop">
					<span class="color-white">全部店铺</span>
					<i class="am-icon-angle-down color-white"></i>
				</div>
			</div>
			
			<ul class="shop_list">
				
			</ul>
		</section>
		
		<div class="filter_modal" id="filter_modal_area">
			<div class="filter_box bggrey padding10">
				<ul class="filterCity">
					
				</ul>
				<div class="color-dgrey am-text-center padding-v10">
					<span>更多店铺，敬请期待</span>
				</div>
			</div>
		</div>
		
		<div class="filter_modal" id="filter_modal_shop">
			<div class="filter_box bggrey padding10">
				<ul class="filterShop">
					
				</ul>
			</div>
		</div>
		
		<!--顶部提示-->
		<div class="top_tip am-text-sm color-white"></div>
		
		<div id="content">
			
		</div>
		
		<footer class="footer_nav">
			<ul class="am-avg-sm-4">
				<li class="">
					<a href="javascript:void(0)" class="active_color am-text-sm">
						<p class="marginb5">
							<img src="../../public/img/icon/field_Selected@2x.png"></img>
						</p>
						<span>预约场地</span>
					</a>
				</li>
				<li>
					<a href="../PrivateEducation/index.html" class="grey_color am-text-sm ">
						<p class="marginb5">
							<img src="../../public/img/icon/coach_default@2x.png"></img>
						</p>
						<span>预约私教</span>
					</a>
				</li>
				<li>
					<a href="../plan/index.html" class="grey_color am-text-sm ">
						<p class="marginb5">
							<img src="../../public/img/icon/plan_default@2x.png"></img>
						</p>
						<span>奇顽计划</span>
					</a>
				</li>
				<li>
					<a href="../personalCenter/index.html" class="grey_color am-text-sm ">
						<p class="marginb5">
							<img src="../../public/img/icon/user_default@2x.png"></img>
						</p>
						<span>个人中心</span>
					</a>
				</li>
			</ul>
		</footer>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		
		<!--模板引擎-->
		<!--轮播-->
		<script id="slider" type="text/html">
			{{each slider_data}}
			<li>
		    	<div class="banner_cover">
		    		<img src="{{$value.bgimg}}" />
					<!--<h1 class="color-white am-text-center am-margin-bottom-xs">{{$value.title}}</h1>
					<p><span class="banner_btn color-white">{{$value.btn_text}}</span></p>-->
				</div>
		    </li>
		    {{/each}}
		</script>
		
		<!--店铺列表-->
		<script id="shop_list" type="text/html">
			{{each shop_list}}
			<li class="shop_item" data-index="{{$index}}" data-id="{{$value.shop_id}}">
				<a href="{{'./shop_detail.html?shop_id='+ $value.shop_id}}"  class="am-block">
					<img class="shop_img" src="{{$value.bgImg_src}}" alt="" />
					<div class="shop_cover am-cf padding10">
						<div class="am-fl color-white">
							<h2 class="">{{$value.name}}</h2>
							<span class="color-dgrey">{{$value.address}}</span>
						</div>
						<!--<div class="am-fr">
							{{if $value.is_top}}
							<span class="heart_icon am-icon-heart am-icon-fw color-active am-text-lg"></span>
							{{else}}
							<span class="heart_icon am-icon-heart-o am-icon-fw color-white am-text-lg"></span>
							{{/if}}
						</div>-->
					</div>
				</a>
			</li>
			{{/each}}
		</script>
		
		<!--城市赛选-->
		<script id="cityFilter" type="text/html">
			{{each filterCity}}
				{{if $index==0}}
				<li>
					<div class="title padding-v10">
						<hr />
						<b class="bggrey am-text-sm color-dgrey">{{$value.cityName}}</b>
					</div>
					<ul class="btn_group am-avg-sm-3">
						{{each $value.areaList}}
						{{if $index==0}}
						<li>
							<button class="am-btn am-btn-default active">{{$value.areaName}}</button>
						</li>
						{{else}}
						<li>
							<button class="am-btn am-btn-default">{{$value.areaName}}</button>
						</li>
						{{/if}}
						{{/each}}
					</ul>
				</li>
				{{else}}
				<li>
					<div class="title padding-v10">
						<hr />
						<b class="bggrey am-text-sm color-dgrey">{{$value.cityName}}</b>
					</div>
					<ul class="btn_group am-avg-sm-3">
						{{each $value.areaList}}
						<li>
							<button class="am-btn am-btn-default">{{$value.areaName}}</button>
						</li>
						{{/each}}
					</ul>
				</li>
				{{/if}}
			{{/each}}
		</script>
		
		<!--店铺赛选-->
		<script id="shopFilter" type="text/html">
			<li>
				<div class="title padding-v10">
					<hr />
					<b class="bggrey am-text-sm color-dgrey">{{filterShop.cityName}}-店铺主题</b>
				</div>
				<ul class="btn_group am-avg-sm-3">
					{{each filterShop.shopTypeList}}
						{{if $index==0}}
						<li>
							<button class="am-btn am-btn-default active">全部店铺</button>
						</li>
						{{else}}
						<li>
							<button class="am-btn am-btn-default">{{$value.shopTypeName}}</button>
						</li>
						{{/if}}
					{{/each}}
				</ul>
			</li>
		</script>
		
		<script>
		(function($, arttmpl) {
			
			/*mock*/
			var slider_data = [
				{bgimg:'../../public/img/shop/buildbody_img001.jpg',title:'邀请好友一起健身',btn_text:'点击立即分享'},
				{bgimg:'../../public/img/shop/buildbody_img002.jpg',title:'邀请好友一起健身',btn_text:'点击立即分享'}
			];
			
			var shop_list =[
				{
					shop_id:0,
					name:'定安体育健身中心002',
					bgImg_src:'../../public/img/shop/buildbody_img001.jpg',
					address:'杭州市上城区定安路25号',
					is_top:true
				},
				{
					shop_id:1,
					name:'定安体育健身中心002',
					bgImg_src:'../../public/img/shop/buildbody_img002.jpg',
					address:'杭州市上城区定安路25号',
					is_top:true
				},
				{
					shop_id:2,
					name:'定安体育健身中心002',
					bgImg_src:'../../public/img/shop/buildbody_img003.jpg',
					address:'杭州市上城区定安路25号',
					is_top:true
				}
			];
			var filterCity =[
				{
					cityName:'上海',
					areaList:[
						{areaId:0,areaName:'上海全区'},
						{areaId:1,areaName:'徐汇区'},
						{areaId:2,areaName:'普陀区'},
						{areaId:3,areaName:'静安区'},
					]
				},
				{
					cityName:'杭州',
					areaList:[
						{areaId:0,areaName:'杭州全区'},
						{areaId:1,areaName:'徐汇区'},
						{areaId:2,areaName:'普陀区'},
						{areaId:3,areaName:'静安区'},
					]
				},
				{
					cityName:'深圳',
					areaList:[
						{areaId:0,areaName:'深圳全区'},
						{areaId:1,areaName:'徐汇区'},
						{areaId:2,areaName:'普陀区'},
						{areaId:3,areaName:'静安区'},
					]
				}
			];
			var filterShop ={
				cityName:'上海市全城市',
				shopTypeList:[
					{shopTypeId:0,shopTypeName:'全部店铺'},
					{shopTypeId:1,shopTypeName:'全能店'},
					{shopTypeId:2,shopTypeName:'普陀区'},
					{shopTypeId:3,shopTypeName:'静安区'}
				]
			};
				
			
			/*绘制轮播图*/
			var drawSlider = function(data){
				var d = {
					slider_data:data
				}
				
				var content = arttmpl('slider', d);
				$('.slider').html(content);
				
			}
			
			/*绘制健身馆列表*/
			var drawShop_list = function(data){
				var shop_list_data ={
					shop_list:data
				}
				
				var content = arttmpl("shop_list", shop_list_data);
				$(".shop_list").html(content);
				
				$(".shop_list").find('.heart_icon').click(function(event){
					var shop_id = $(this).closest('.shop_item').attr('data-id');
					var event = window.event||arguments[0];
					event.stopPropagation();
					event.preventDefault();
					
					changeOrder($(this),shop_id);
				})
			};
			
			changeOrder = function (self, id){
				
				var isTop = self.hasClass('am-icon-heart');
				var $shop_list = $('.shop_list');
				var selfParent = self.closest('.shop_item');
				
				var $t = selfParent.find('h2').html();
				var $p = $('<p></p>');
				var $top_tip = $('.top_tip');
				
				if(!isTop){
					self.addClass('am-icon-heart color-active').removeClass('am-icon-heart-o color-white');
					$p.html('已取消置顶'+$t+'！！');
				}else{
					self.removeClass('am-icon-heart color-active').addClass('am-icon-heart-o color-white');
					$p.html('已为你置顶'+$t+'！！');
				}
				$top_tip.append($p);
				setTimeout(function(){
					$p.remove();
				},500)
				
			}
			
			/*绘制城市赛选*/
			var drawCity_filter = function(data){
				var filterCity_data = {
					filterCity:data
				}
				
				var content = arttmpl("cityFilter", filterCity_data);
				$(".filterCity").html(content);
				
				
				var btns = $(".filterCity").find('.am-btn');
				btns.click(function(){
					var btnText = $(this).text();
					var tit = $(this).closest('.btn_group').prev('.title').text();
					
					$('.filter_tab_area span').text(tit+btnText);
					
					btns.removeClass('active');
					$(this).addClass('active');
					
				})
				
			}
			
			/*绘制店铺类型赛选*/
			var drawShop_filter = function(data){
				/*处理数据*/
				var filterShop_data = {
					filterShop:data
				}
				
				/*绘制html*/
				var content = arttmpl("shopFilter", filterShop_data);
				$(".filterShop").html(content);
				
				/*绑定事件*/
				var btns = $(".filterShop").find('.am-btn');
				btns.click(function(){
					var btnText = $(this).text();
					
					$('.filter_tab_shop span').text(btnText);
					
					
					btns.removeClass('active');
					$(this).addClass('active');
				})
			}
			
			
			
			/*轮播图回调*/
			var sucessCallback_silder = function(res){
				drawSlider(res);
			}
			
			/*shop——list回调*/
			var sucessCallback_shopList = function(res){
				drawShop_list(shop_list);
			}
			
			/*城市赛选回调*/
			var sucessCallback_cityFilter = function(res){
				drawCity_filter(res);
			}
			
			/*赛选店铺*/
			var sucessCallback_shopFilter = function(res){
				drawShop_filter(res);
			}
			
			
			var errorcallback = function(statuscode, statusmsg) {
				console.log(statuscode + "  " + statusmsg);
			};
				
			var faildcallback = function(xhr, errtype, errthow) {
				console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
			};

			
			/*请求slider数据*/
			var getSilder_data = function(op, sucessCallback, errorcallback, faildcallback){
				request('url', 't', 'd', slider_data, sucessCallback, errorcallback, faildcallback);
			};
			
			/*请求店铺列表数据*/
			var getShop_data = function(op, sucessCallback, errorcallback, faildcallback){
				request('url', 't', 'd', shop_list, sucessCallback, errorcallback, faildcallback);
			};
			
			/*请求赛选城市数据*/
			var getCityFilter_data = function(op, sucessCallback, errorcallback, faildcallback){
				request('url', 't', 'd', filterCity, sucessCallback, errorcallback, faildcallback);
			}
			
			/*请求赛选店铺数据*/
			var getShopFilter_data = function(op, sucessCallback, errorcallback, faildcallback){
				request('url', 't', 'd', filterShop, sucessCallback, errorcallback, faildcallback);
			}
			
			
			
			var init = function(){
				
				getSilder_data('op', sucessCallback_silder, errorcallback, faildcallback);
				getShop_data('op', sucessCallback_shopList, errorcallback, faildcallback);
				getCityFilter_data('op', sucessCallback_cityFilter, errorcallback, faildcallback);
				getShopFilter_data('op', sucessCallback_shopFilter, errorcallback, faildcallback)
				
				
				var $modal = $('#my-modal-loading');
				$modal.hide();
			}
			
			init();
			
			
		})(jQuery, template);	

			
		</script>
		
	</body>
</html>
